<script lang="ts" setup>
import {computed, onMounted, ref, watch} from 'vue';
import {userStore} from "@/store/app";
import axios from "axios";


const user = userStore();
const collect = userStore();
const images = ref<Animal[]>([]); // 明确指定 images 为 Animal 类型数组 // 存储从 API 获取的图片数据

interface Animal {
  animal_id: number;
  animal_name: string;
  species: string;
  imageUrl: string;
}

// 根据 tab 切换筛选图片
const TabImage = computed(() => {
  if (collect.$state.TabIndex == 3) return images.value.filter(i => i.species === '天鹅');
  else if (collect.$state.TabIndex == 2) return images.value.filter(i => i.species === '猫');
  else return images.value;
});

const userName = computed(() => {
  return collect.$state.UserName === '' ? '一个没有登录的用户' : collect.$state.UserName
})

function refreshPage() {
  window.location.reload();
}

// 取消收藏逻辑
const nonlike = (animal_name: string) => {
  console.log('取消收藏')
  console.log(animal_name)
  axios.post('http://47.113.189.87:8080/users/deleteFavorite', {
    user_name: collect.$state.UserName,
    animal_name: animal_name
  }).then((res) => {
    if (res.data.code === 20021) {
      // 取消收藏成功逻辑
      alert(res.data.msg)
      refreshPage()
    } else {
      // console.log(res.data.msg)
      alert(res.data.msg)
    }
  })
};


watch(() => collect.$state.LoginStatus, (newValue, oldValue) => {
  //当监视到登录状态改变的时候
  if (newValue && !oldValue) {
    //当用户从未登录状态转为登陆状态的时候，向远端请求收藏列表
    collect.$state.ShowButton = false
  } else {
    console.log('状态进行了切换')
  }
})

function logout() {
  collect.logOut()
  collect.ShowButton = true
  refreshPage()
}

onMounted(() => {
  axios.post('http://47.113.189.87:8080/users/getFavorites', {
    name: collect.$state.UserName
  })
    .then(function (response) {
      console.log(response.data.data);
      console.log('收藏列表获取成功')
      collect.setUserCollection(response.data.data)
      images.value = collect.$state.UserCollection
    })
    .catch(function (error) {
      console.log(error);
    });
});
</script>

<template>
  <v-card class="rounded-card" variant="outlined">
    <v-card
      class="rounded-card"
      height="300px"
      style="background-image: url('/src/assets/background.png'); background-size:cover;"
      width="100%"
    >
      <v-card-actions>
        <v-card-item>
          <v-avatar class="pic"
                    image="@/assets/LOGO.png"
                    size="150">
          </v-avatar>
          <v-btn class="btn-home" color="#5865f2" rounded @click="logout">
            退出登录
          </v-btn>
        </v-card-item>
        <v-card-item>
          <v-card-title class="title">
            <!--动态改变-->
            {{ userName }}
          </v-card-title>
          <v-card-text class="text">
            个性签名~
          </v-card-text>
        </v-card-item>

        <v-card-actions>
          <v-btn class="btn-change" color="#5865f2" rounded
                 @click="">
            编辑资料
          </v-btn>
        </v-card-actions>
      </v-card-actions>
    </v-card>

    <!--    <v-dialog v-if="user.$state.ShowButton" v-model="user.ChangeDialog" width="800">-->
    <!--      <ChangePage/>-->
    <!--    </v-dialog>-->

    <v-tabs v-model="collect.$state.TabIndex" align-tabs="center" color="deep-purple-accent-4">
      <v-tab :value="1">全部收藏</v-tab>
      <v-tab :value="2">猫猫收藏</v-tab>
      <v-tab :value="3">大鹅收藏</v-tab>
    </v-tabs>

    <v-container>
      <v-window v-model="collect.$state.TabIndex">
        <v-window-item v-for="n in 3" :key="n" :value="n">
          <v-container fluid>
            <v-row>
              <v-col v-for="image in TabImage" :key="image.animal_id" cols="3">
                <v-card class="rounded-xl">
                  <v-img
                    :src="image.imageUrl"
                    aspect-ratio="1.3"
                    cover
                    lazy-src="@/assets/placeholder.jpg"
                  >
                    <!--卡片的加载占位符-->
                    <template v-slot:placeholder>
                      <div class="d-flex align-center justify-center fill-height">
                        <v-progress-circular color="grey-lighten-4" indeterminate></v-progress-circular>
                      </div>
                    </template>
                  </v-img>
                  <v-card-title class="text-h6 text-center">{{ image.animal_name }}</v-card-title>
                  <div class="d-flex align-center justify-center" style="margin-bottom: 10px">
                    <v-btn class="text-center" color="blue" size="large" variant="tonal"
                           @click="nonlike(image.animal_name)">取消收藏
                    </v-btn>
                  </div>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
        </v-window-item>
      </v-window>
    </v-container>
  </v-card>
</template>

<style scoped>
.pic {
  border-radius: 50%;
  margin-left: 40px;
  margin-top: 30px;
  margin-right: 20px;
  display: flex;
}

.title {
  font-size: 215%;
}

.text {
  margin-top: 20px;
  font-size: 18px;
}

.btn-home {
  margin-left: 78px;
  margin-top: 20px;
  background: linear-gradient(to right, rgb(160, 218, 238), rgb(160, 160, 238));
}

.btn-change {
  width: 150px;
  height: 60px;
  margin-left: 350px;
  background: linear-gradient(to right, rgb(160, 218, 238), rgb(160, 160, 238));
}

.rounded-card {
  border-radius: 20px;
}
</style>
